<template>
  <view class="lr_box">
    <view>{{ label }}</view>
    <view class="r_box">
      <view v-if="type === 'text'" class="value_box">
        {{ value }}
      </view>
      <view v-else-if="type === 'input'" class="value_box">
        <input type="text" :value="value" :placeholder="placeholder" @input="change" />
        <view v-if="isScan" class="scan_box" @tap="scan">
          <image style="width: 40rpx; height: 40rpx" src="/static/image/scan.png" />
        </view>
      </view>
      <view v-else-if="type === 'select'" class="value_box">
        <!-- <view> {{ value }} </view>
        <view  class="scan_box">
          <image style="width: 40rpx;height: 40rpx" src="/static/image/blue_down.png" />
        </view> -->

        <picker mode="selector" style="flex-grow: 1; text-align: right" :range="list" @change="changeSelect" range-key="name">
          <!-- {{ value ? value : '请选择' }} -->
          <view class="picker">{{ value ? value : '请选择' }} </view>
        </picker>
      </view>
      <view v-else-if="type === 'radio'" class="value_box">
        <view class="yn_box" :class="value === 1 ? 'active' : ''" @tap="radioSelect(1)">是</view>
        <view class="yn_box" :class="value === 0 ? 'active' : ''" @tap="radioSelect(0)">否</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getBasGoodsBrandList, getBasGoodsTypeTree, getBasGoodsRate } from '@/service/api/dropDown'
import { getBasWarehouseList, getBasStorehouseList, getLocationList } from '../service/api/logistics'
export default {
  props: {
    label: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'text',
    },
    value: {
      type: [String, Number],
      default: '',
    },
    selectParams: {
      type: Object,
      default: () => {},
    },

    placeholder: {
      type: String,
      default: '请输入',
    },
    isScan: {
      type: Boolean,
      default: false,
    },
    selectCallBack: {
      type: Function,
      default: () => {},
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  data() {
    return {
      list: [],
    }
  },
  created() {
    console.log('value' + this.value)
    // if(this.selectParams.list){
    //   this.list=this.selectParams.list;
    //   return
    // }
    if (this.selectParams.name === 'rate') {
      this.getRate()
    } else if (this.selectParams.name === 'goodsType') {
      this.getGoodsType()
    } else if (this.selectParams.name === 'brandName') {
      this.getBrandName()
    } else if (this.selectParams.name === 'warehouse') {
      this.getWareHouse()
    } else if (this.selectParams.name === 'locationName') {
      this.getLocationName()
    } else if (this.selectParams.name === 'storehouseName') {
      this.getBasStorehouse()
    } 
    // else if (this.selectParams.name === 'expiration') {
    //   this.list = this.selectParams.list
    // }
  },
  methods: {
    change(e) {
      this.$emit('change', e.detail.value)
    },
    scan() {
      // qrScan(res=>{
      //   this.$emit("change",res)
      // })
    },
    select() {
      // openZSelect(this.selectParams,(e)=>{
      //   this.selectCallBack(e)
      // })
    },
    radioSelect(val) {
      this.$emit('change', val)
      console.log(this.value)
    },
    changeSelect(e) {
      console.log('e=' + JSON.stringify(e))
      const index = e.target.value * 1
      // this.value = this.list[index].name

      console.log('index=' + index + ',name' + this.selectParams.name)
      this.$emit('selectCallBack', { item: this.list[index], name: this.selectParams.name })
    },
    getRate() {
      getBasGoodsRate({}).then(res => {
        if (res.content.length) {
          this.list = res.content

        }
      })
    },
    getGoodsType() {
      getBasGoodsTypeTree({}).then(res => {
     
        if (res.length) {
          this.list = res
        }
      })
    },
    getBrandName() {
      getBasGoodsBrandList({}).then(res => {

        if (res.content.length) {
          this.list = res.content
        }
      })
    },
    getWareHouse() {
      getBasWarehouseList({}).then(res => {

        if (res.content.length) {
          this.list = res.content
        }
      })
    },
    getLocationName() {
      getLocationList({}).then(res => {

        if (res.content.length) {
          this.list = res.content
        }
      })
    },
    getBasStorehouse() {
      getBasStorehouseList({}).then(res => {

        if (res.content.length) {
          this.list = res.content
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.lr_box {
  width: 100%;
  display: flex;
  align-items: center;
  height: 80rpx;
  justify-content: space-between;
  background: white;
  border-bottom: rgb(230, 230, 230) 1px solid;
  input {
    text-align: right;
  }
}
.r_box {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}
.value_box {
  display: flex;
  .scan_box {
    width: 50rpx;
    height: 100%;
    display: flex;
    justify-content: center;
  }
}
.active {
  border: blue 1px solid;
  color: blue;
  background: white;
}
.yn_box {
  background: #f6f7f9;
  display: flex;
  width: 100rpx;
  height: 50rpx;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  margin: 0 10rpx;
}
</style>
